import React, { Component } from 'react';
import { WeaTop, WeaTab, WeaLocaleProvider, WeaTable, WeaNewScroll, WeaRightMenu } from 'ecCom';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Button } from 'antd';

const getLabel = WeaLocaleProvider.getLabel;

@inject('accountListStore')
@observer
class AccountList extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.accountListStore.getTableList();
    this.props.accountListStore.getTabFormData();
  }
  renderRightAndDropMenus() {
    const { accountListStore } = this.props;
    const datas = [
      {
        key: '1',
        disabled: false,
        icon: <i className="icon-coms-search" />,
        content: getLabel('197', '搜索'),
        onClick: () => accountListStore.getTableList(),
      },
    ];
    return datas;
  }

  // 获取搜索框
  getSearchForm() {
    const { accountListStore } = this.props;
    return (
      <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@zz1hhm`} ref="scroll" height={'auto'} >
        {accountListStore.selectedKey !== '0' && accountListStore.searchForm.render({ needTigger: true }, {
          onEnterSearch: () => accountListStore.getTableList(),
        })}
        {/* {accountListStore.selectedKey ==="0" && accountListStore.advancedSearchForm.render({needTigger: true},)} */}
      </WeaNewScroll>
    );
  }

  // 获取高级搜索框的操作按钮
  getSearchFormButtons() {
    const { accountListStore } = this.props;
    const searchbutton = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@du0hhd@search`} type="primary" onClick={() => accountListStore.getTableList()}>{getLabel('387355', '搜索')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@yua85n@reset`} type="ghost" onClick={() => accountListStore.searchForm.resetForm()}>{getLabel('2022', '重置')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@597hvx@cancel`} type="ghost" onClick={() => accountListStore.setShowSearchAd()}>{getLabel('31129', '取消')}</Button>,
    ];
    return searchbutton;
  }

  render() {
    const { accountListStore } = this.props;
    const { showDropMenu, columns, dataSource, showSearchAd, setShowSearchAd, getTableList, searchForm, advancedSearchForm } = accountListStore;
    const documentTitle = searchForm.getFormParams().Title;
    return (
      <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@z1h3iw`} datas={this.renderRightAndDropMenus()}>
        <div className="postDocManage odocExchange_accountList">
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@ndrnvm`}
            title={<span style={{ color: '#333333' }}>{getLabel('384372', '发文台账')}</span>}
            icon={<i className="icon-coms-official" />}
            iconBgcolor="#f93d3d"
            showDropIcon={showDropMenu}
            dropMenuDatas={this.renderRightAndDropMenus()}
          />
          <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@aw7n36`}
            searchType={['base', 'advanced']}
            showSearchAd={showSearchAd}
            setShowSearchAd={(bool) => {
              setShowSearchAd(bool);
            }}
            buttonsAd={this.getSearchFormButtons()}
            searchsAd={this.getSearchForm()}
            advanceHeight={120}
            onSearch={text => getTableList(text)}
            searchsBaseValue={documentTitle}
            onSearchChange={(v) => {
              if (accountListStore.selectedKey !== '0') {
                searchForm.updateFields({ Title: { value: v } }, false);
              } else {
                advancedSearchForm.updateFields({ Title: { value: v } }, false);
              }
            }}
          />
          <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@qew9s4`}
            className="odoc_subList_iconStyle"
            columns={toJS(columns)}
            defaultExpandAllRows={false}
            expandedRowRender={record => this.expandedRow(record)}
            dataSource={toJS(dataSource)}
            // pagination={{  //分页
            // 	current: accountListStore.current,
            // 	total: accountListStore.count, //数据总数量
            // 	pageSize: accountListStore.pageSize,  //显示几条一页
            // 	defaultPageSize: accountListStore.pageSize, //默认显示几条一页
            // 	showQuickJumper: true,
            // 	showSizeChanger: true,  //是否显示可以设置几条一页的选项
            // 	onShowSizeChange(current, pageSize) {  //当几条一页的值改变后调用函数，current：改变显示条数时当前数据所在页；pageSize:改变后的一页显示条数
            // 		accountListStore.changeShowSize(current, pageSize);
            // 	},
            // 	onChange(current) {  //点击改变页数的选项时调用函数，current:将要跳转的页数
            // 		//处理分页跳转
            // 		accountListStore.changeShowSize(current, accountListStore.pageSize);
            // 	},
            // 	showTotal: function () {  //设置显示一共几条数据
            // 		return getLabel('18609',"共") + ' ' + accountListStore.count + ' ' + getLabel('18256',"条");
            // 	}
            // }}
            loading={accountListStore.loading}

          // onChange={(pagination, filters, sorter) => {
          // 	//处理排序
          // 	if (sorter.column && sorter.order) {
          // 		accountListStore.setOrderkey(sorter.column.orderkey);
          // 		accountListStore.setSortOrder(sorter.order);
          // 		accountListStore.doSearch();
          // 	}
          // }}
          />
        </div>
      </WeaRightMenu>
    );
  }

  // 额外展开的子列表
  expandedRow(record) {
    let datas = JSON.parse(record.docReceiveInfoIdspan);
    let rows = [];
    if (datas.length > 0) {
      datas.map((data) => {
        rows.push(
          <div className="wea-table-child-acc">
            <div className="accountList_top">{getLabel('20217', '收文单位')}：{data.company_name}</div>
            <div>
              <div className="accountList_bottom">{getLabel('26034', '处理时间')}：{data.operate_date}</div>
              <div className="accountList_bottom">{getLabel('1929', '当前状态')}：{data.noStatus}</div>
              {
                data.noStatus != '已签收' &&
                <div className="accountList_bottom">{getLabel('21662', '处理意见')}：{data.note}</div>
              }
            </div>
          </div>,
        );
      });
      return (<div className="wea-table-child-acc-parent">{rows}</div>);
    }
  }
}
export default AccountList;
